<template>
    <h1>品牌管理系统</h1>
    <div class="content">
        <h4>品牌管理</h4>
        <table border="1" width="80%">
            <thead>
                <tr>
                    <td><input type="checkbox" ></td>
                    <th>编号</th>
                    <th>品牌名
                    </th>
                    <th>品牌价格
                    </th>
                    <th>创建的时间
                    </th>
                    <th>操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <!--列表循环 有key 会根据dom标签的变化而变化，无key 就会固定在当前选中的dom标签不会改变-->
                <tr v-for="(item,index) in brandList" :key="item.id">
                    <td><input type="checkbox"></td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td :class="{colorRed:item.price >600}">{{ item.price }}</td>
                    <td>{{ item.time }}</td>
                    <td><a href="#" @click="delbrand(item.id)">删除</a></td>
                </tr>
                <tr>
                    <td>价格统计：</td>
                    <td colspan="3">总价格：{{ sumprice }}</td>
                    <td colspan="2">平均价格：{{ avgprice }}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr v-show="brandList.length==0">
                    <td colspan="6" style="text-align: center; font-size: 26px; color: aqua;">暂无数据</td>
                </tr>
            </tfoot>
        </table>
        <h4>添加品牌</h4>
        <form action="#" class="forms">
            <span>品牌名字:</span>
            <input type="text" placeholder="请添加品牌名字" v-model="brandName"><br>
            <span>品牌价格:</span>
            <input type="text" placeholder="请添加品牌的价格" v-model="price"><br>
            <button class="btns" @click="addBrand">添加品牌</button>
        </form>
    </div>


</template>

<script setup>

import { computed, ref } from 'vue'
const brandName = ref('')
const price = ref(0)
const brandList = ref([

    { id: 1, name: '华为', price: 2000 ,time:new Date('2025-01-01') },
    { id: 2, name: 'iphone', price: 4000 ,time:new Date('2025-01-01') },
    { id: 3, name: '小米', price: 1900 ,time:new Date('2025-01-01') },
    { id: 4, name: '红米', price: 1200 ,time:new Date('2025-01-01') },
])
const addBrand = () => { 
    console.log("点击了添加");
    if (brandName.value.trim().length==0 || price.value==0) { 
        alert("请输入完整信息");
        return;
    }
    // console.log(brandList.value[brandList.value.length - 1].id + 1);
    //解决 删除完后没有id值的问题
    const id = brandList.value.length > 0 ? brandList.value[brandList.value.length - 1].id + 1 : 100;
    brandList.value.push({
        id:id,
        name:brandName.value,
        price:price.value,
        time:new Date()
    })
}
//删除品牌
const delbrand = (id) => { 
    console.log(brandList.value.findIndex(item => item.id == id));
    // 查找要删除的索引位置
    let index = brandList.value.findIndex(item => item.id == id);
    // 根据索引删除数据 数组的splice方法，第一个参数是索引位置，第二个参数是要删除的数量
    brandList.value.splice(index , 1)
}

const sumprice = computed(() => {
    //reduce js高级函数主要数组总和 方法，第一个参数是回调函数，第二个参数是初始值
    return brandList.value.reduce((sum,item)=> sum += item.price , 0)
})
//平均值
const avgprice = computed(() => { 

    return (sumprice.value / brandList.value.length).toFixed(2)

})

</script>

<style scoped>
.content{
    width: 80%;
    border: 1px solid rgb(171, 168, 168);
    h4{
        text-align: center;
    }
    table{
        width: 80%;
       margin-left: 50px;
    }
}
.forms{
    margin-left: 50px;
    input{
        width: 300px;
        height: 30px;
        margin-top: 8px;
    }
}
.btns{
    background-color: aqua;
    height: 40px;
    width: 180px;
    border-radius: 8px;
    margin-top: 10px;
}
.colorRed{
    color: red;
}
</style>